import React, { useEffect, useState } from 'react';
import '../../css/chy/Shaix.css';
import { Tabs, Button } from 'antd-mobile'
import axios from 'axios';
import Xx from '../../css/chy/icon/Xx.svg?react'
import Ss from '../../css/chy/icon/Ss.svg?react'


const OrderTabs = () => {
  const [orders, setOrders] = useState([]);



  const fetchOrders = async () => {
    try {
      const response = await axios.get('http://localhost:3000/rili/api/orders');
      setOrders(response.data);

    } catch (error) {
      alert('数据加载失败')
    }
  };
  useEffect(() => {
    fetchOrders();
  }, []);

  const handleCancelOrder = async (orderId) => {
    try {
      const response = await axios.post('http://localhost:3000/rili/api/orders/cancel', { orderId });
      alert('订单已取消')
      window.location.reload()
      // 这里可以调用一个函数来刷新订单列表
    } catch (error) {
      console.error('Cancel error:', error);
      alert('取消订单失败')
    }
  };

  // 过滤订单数据
  const pendingOrders = orders.flatMap(order =>
    order.orders.filter(item => item.status === 'pending').map(item => ({
      ...item,
      date: order.date

    }))
  );

  const completedOrders = orders.flatMap(order =>
    order.orders.filter(item => item.status === 'completed').map(item => ({
      ...item,
      date: order.date,
    }))
  );

  const cancelledOrders = orders.flatMap(order =>
    order.orders.filter(item => item.status === 'cancelled').map(item => ({
      ...item,
      date: order.date,
    }))
  );

  return (
    <div>
      <div>
        <p className='calendar-header-title'>我的预约</p>
        <span className='span2'>
            <Xx className='xx2'></Xx>
        </span>
        <span className='span3'>
            <Ss className='Ss'></Ss>
        </span>
      </div>
      <Tabs>
        <Tabs.Tab title='待进行' key='1'>
          {pendingOrders.map((order) => (
            <div key={order._id} className='wancheng'>
              <div className='service-div'>
                <img src={order.img} alt="" className='service-img' />
              </div>
              <div className='order-info'>
                <p>
                  <strong>{order.service}</strong>
                </p>
                <p>
                  {order.provider}
                </p>
                <p>
                  {order.status === 'pending' ? '待进行' : order.status === 'completed' ? '已完成' : '已取消'}
                  <Button className='but1' type="primary" danger onClick={() => handleCancelOrder(order.id)}>
                取消订单
              </Button>
                </p>

              </div>
              <div>
                

              </div>
              
            </div>





          ))}
        </Tabs.Tab>
        <Tabs.Tab title='已完成' key='2'>
          {completedOrders.map((order) => (
            <div key={order._id} className='wancheng'>
              <div className='service-div'>
                <img src={order.img} alt="" className='service-img' />
              </div>
              <div className='order-info'>
                <p>
                  <strong>{order.service}</strong>
                </p>
                <p>
                  {order.provider}
                </p>
                <p>
                  {order.status === 'pending' ? '待进行' : order.status === 'completed' ? '已完成' : '已取消'}
                </p>

              </div>

            </div>
          ))}
        </Tabs.Tab>
        <Tabs.Tab title='已取消' key='3'>
          {cancelledOrders.map((order) => (
            <div key={order._id} className='wancheng'>
              <div className='service-div'>
                <img src={order.img} alt="" className='service-img' />
              </div>
              <div className='order-info'>
                <p>
                  <strong>{order.service}</strong>
                </p>
                <p>
                  {order.provider}
                </p>
                <p>
                  {order.status === 'pending' ? '待进行' : order.status === 'completed' ? '已完成' : '已取消'}
                </p>

              </div>

            </div>
          ))}
        </Tabs.Tab>
      </Tabs>

    </div>

  );
};

export default OrderTabs;